<template>
    <main>
        <div class="box">
            <div class="inner-box">
                <div class="forms-wrap">
                    <form @submit.prevent="signIn" autocomplete="new-password" class="sign-in-form">
                        <div class="logo">
                            <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/9dWK6LjOKGvO8E3vq5GFCj7OyLxTTQjQ/WHVtBIkwZi.jpg"
                                alt="easyclass" />
                        </div>
                        <div class="heading">
                            <h2>Welcome Back</h2>
                            <h6>Not registred yet?</h6>
                            <a href="#" class="toggle" @click="toggleForm">Sign up</a>
                            <!-- <div v5-config="{ name:' login-v5' ,host:'freetvks2vi2.verify5.com' ,token:'466222b15e5e4874a3ca218fdbb7cfcb' }"></div> -->
                        </div>
                        <!-- <div @click="yanTest">

                            验证测试
                        </div> -->
                        <div id="captcha"></div>
                        <div id="reset_btn"></div>
                        <div id="btn"></div>

                        
                        <div class="actual-form">
                            <div class="input-wrap">
                                <input @input="passwordChange('login')" type="text" minlength="4" class="input-field"
                                    autocomplete="new-password" required v-model.trim="signInData.name" />
                                <label>Phone number/Email</label>
                                <span v-if="loginisIconUrse" class="el-input__suffix"><span
                                        class="el-input__suffix-inner"><!----><!----><!----><!----></span><i
                                        class="el-input__icon el-input__validateIcon el-icon-circle-check"></i></span>
                            </div>
                            <div class="input-wrap">
                                <input type="password" minlength="4" class="input-field" autocomplete="new-password"
                                    required v-model="signInData.password" />
                                <label>Password</label>
                                <!-- <span v-if="isIcon_two" class="el-input__suffix"><span class="el-input__suffix-inner"></span><i class="el-input__icon el-input__validateIcon el-icon-circle-check"></i></span> -->
                            </div>
                            <input type="submit" value="Sign In" class="sign-btn" />
                            <p class="text">
                                Forgotten your password or you login datails? <a href="#">Get help</a> signing in
                            </p>
                        </div>
                    </form>
                    <form slot="reference" @submit.prevent="signUp" autocomplete="new-password" class="sign-up-form">
                        <div class="logo">
                            <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/9dWK6LjOKGvO8E3vq5GFCj7OyLxTTQjQ/WHVtBIkwZi.jpg"
                                alt="easyclass" />
                        </div>
                        <div class="heading">
                            <h2>Register account</h2>
                            <h6>Already have an account?</h6>
                            <a class="toggle" @click="toggleForm">Sign in</a>
                        </div>
                        <div class="actual-form">
                            <div class="input-wrap">
                                <input @input="passwordChange('register')" type="text" minlength="4" class="input-field"
                                    autocomplete="new-password" required v-model="signUpData.name" />
                                    
                                <label>Phone number/Email</label>
                                <span v-if="registerisIconUrse" class="el-input__suffix"><span
                                        class="el-input__suffix-inner"><!----><!----><!----><!----></span><i
                                        class="el-input__icon el-input__validateIcon el-icon-circle-check"></i></span>

                            </div>
                            <div class="input-wrap">
                                <input  type="text" class="input-field" autocomplete="new-password" required
                                    v-model="signUpData.email" />
                                  
                                <label>验证码 </label>
                                 <el-button type="primary"  v-show="timeTrue == true" @click="acquire">获取验证码</el-button> 
                                    <el-button type="primary" disabled="disabled" v-show="timeTrue == false" >{{ time }}秒后重新获取</el-button >
                                        <!-- <V5Dialog ref="v5dialog" host="freetvks2vi2.verify5.com" token="466222b15e5e4874a3ca218fdbb7cfcb"/> -->
                                    </div>
                            <div class="input-wrap">
                                <input type="password" minlength="4" class="input-field" autocomplete="new-password"
                                    required v-model="signUpData.password" />
                                <label>Password</label>
                                <!-- <span v-if="isIcon" class="el-input__suffix"><span class="el-input__suffix-inner"></span><i class="el-input__icon el-input__validateIcon el-icon-circle-check"></i></span> -->
                            </div>
                            <transition name="fade animate__animated animate__fadeOutDown">
                            <div v-if="isVerify" class="verlfy animate__animated animate__fadeInUp ">
                                <a href="https://www.geekpark.net/">极客公园</a>
                                <slide-verify :l="42"
                                :r="10"
                                :w="310"
                                :h="155"
                                slider-text="向右滑动"
                                @success="onSuccess"
                                @fail="onFail"
                                @refresh="onRefresh"
                                ></slide-verify>
                              <!-- <div>{{msg}}</div> -->
                            </div>
                        </transition>
                            <input type="submit" value="Sign Up" class="sign-btn" />
                        
                            <p class="text">
                                By signing up, I agree to the <a href="#">Terms of Services</a> and <a href="#">Privacy
                                    Policy</a>
                            </p>
                        </div>
                      
                    </form>
                </div>
                <div class="carousel">
                    <div class="images-wrapper">
                        <img v-for="(image, index) in images" :key="index" :src="image.url"
                            :class="{ 'image': true, 'show': index === currentSlide, [`img-${index + 1}`]: true }"
                            :alt="'Slide ' + (index + 1)" />

                    </div>
                    <div class="text-slider">
                        <div class="text-wrap">
                            <div class="text-group">
                                <h2 v-for="(text, index) in texts" :key="index"
                                    :class="{ 'show': index === currentSlide }">{{ text }}</h2>
                            </div>
                        </div>
                        <div class="bullets">
                            <span v-for="(bullet, index) in bullets" :key="index"
                                :class="{ 'active': index === currentSlide }" @click="moveSlider(index)"
                                :data-value="index + 1"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>
<script>
//  import V5Dialog from 'verify5-vue';
// import {authorization_service_users_register} from '../api/api'
export default {
    data() {
        return {
             emailPattern:/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
             phonePattern:/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
            timeTrue:true,
            time: 60,
            isSignUp: false,
            loginisIconUrse: false,
            loginisIcon_password: false,
            isVerify:false,
            isVerifyflag:'',
            registerisIconUrse: false,
            registerisIcon_password: false,
            msg:'',
            currentSlide: 0,
            bullets: [1, 2, 3],
            signInData: {
                name: '',
                password: ''
            },
            signUpData: {
                name: '',
                email: '',
                password: ''
            },
            images: [
                { url: 'http://lc-RanMoNzS.cn-n1.lcfile.com/ORClAJEgGIj2iJYY870WEg8eJp9ajywg/DSC_7847-202312111137469704-60e3db159d86c-32041525-15%E6%97%A5%201.png' },
                { url: 'http://lc-RanMoNzS.cn-n1.lcfile.com/ORClAJEgGIj2iJYY870WEg8eJp9ajywg/DSC_7847-202312111137469704-60e3db159d86c-32041525-15%E6%97%A5%201.png' },
                { url: 'http://lc-RanMoNzS.cn-n1.lcfile.com/ORClAJEgGIj2iJYY870WEg8eJp9ajywg/DSC_7847-202312111137469704-60e3db159d86c-32041525-15%E6%97%A5%201.png' }
            ],
            texts: [
                'Geek Park 一句话介绍?',
                'Geek Park 一句话介绍?',
                'Geek Park 一句话介绍?'
            ],
        };
    },
    // components:{
    //     V5Dialog
    // },
    beforeDestroy() {
    clearInterval(this.setTimeoutS);
    },
    created() {
    },
    mounted() {
        this.BtnIpnts()
        // this.onRefresh = this.onRefresh.bind(this); 
        // initGeetest4({
        // // 将您的验证码配置信息放在这里
        //     captchaId: 'e0d32dbb79bfeef4619e693fd7728c86'
        // }, (captcha) => {
        //     // captcha为验证码实例
        //     captcha.appendTo("#captcha"); // 将验证码插入到指定的元素中
        // });
    },
    methods: {
         onSuccess(){
            // this.onRefresh();
			console.log('cehsi onSuccess');
                this.msg = 'login success'
                const delay = Math.floor(Math.random() * 1500); // 生成1.5秒内的随机延迟时间
              setTimeout(() => {
                   console.log( this.onRefresh(),' this.onRefresh()');
                   if(this.isVerifyflag=='邮箱'){
                    console.log('调用邮箱验证码');
                   }
                   else if(this.isVerifyflag=='手机号'){
                    console.log('调用手机号验证码');
                   }
                   this.isVerify = false; // 延迟结束后隐藏loading效果
                   this.$message.success('验证码发送成功');
                    this.istimeTrue()
                }, delay);
            },
            onFail(){
			console.log('cehsi onFail');
            this.$message.error('验证失败，请重新验证');
                this.msg = ''
            },
            onRefresh(){
                console.log('cehsi onRefresh');
                this.msg = ''
            },
        // dosomething() {
        //     //某个后台业务方法
        //     this.$refs.v5dialog.verify(function(result) {
        //         //注意<V5Dialog>标签中定义了ref="v5dialog"，这里通过this.$refs.v5dialog可以取到组件的引用
        //         if (result.success) {
        //             var verifyId = result.verifyId;
        //             console.log('verifyId',verifyId);
        //             //TODO 将verifyId随业务参数一起提交至后台进行验证
        //         }
        //     });
        // },
        acquire(){
            if(this.phonePattern.test(this.signUpData.name)){
                this.isVerify=true
                this.isVerifyflag='手机号'
            }else if(this.emailPattern.test(this.signUpData.name)){
                console.log('这个是邮箱');
                this.isVerify=true
                this.isVerifyflag='邮箱'
            }else{
                this.$message.error('请检查手机号或邮箱后重新尝试');
            }
  
        },
        
        istimeTrue(){
            this.timeTrue = false;   
                this.time =60;   
                var setTimeoutS = setInterval(() => {  
                this.time--;   
                if (this.time <= 0) {     
                clearInterval(setTimeoutS);  
                    this.timeTrue = true;      
             }   
           }, 1000); 
        },
        checkInputFormat(value) {
            console.log(value,',this.signInData.name');
            if (this.phonePattern.test(value) || this.emailPattern.test(value)) {
                console.log('手机号格式正确');
                return true;
            } else {
                return false;
            }
        },
        passwordChange(value) {
            if (value === 'login') {
                this.loginisIconUrse = this.checkInputFormat(this.signInData.name);
            } else if (value === 'register') {
                this.registerisIconUrse = this.checkInputFormat(this.signUpData.name);
            }
        },
        BtnIpnts() {
            const inputs = document.querySelectorAll(".input-field");
            inputs.forEach((inp) => {
                inp.addEventListener("focus", () => {
                    inp.classList.add("active");
                    console.log('聚焦');

                });
                inp.addEventListener("blur", () => {
                    if (inp.value != "") return;
                    inp.classList.remove("active");
                    console.log('失焦');
                });
            });
        },
        signIn() {

            console.log('Sign In Data:', this.signInData.password);
        },
        signUp() {
            // Handle sign up form submission
            console.log('Sign Up Data:', this.signUpData);
        },
        // yanTest(){
        //     this.$axios.get('/api/login',{
        //         captcha_id: 'e0d32dbb79bfeef4619e693fd7728c86',
        //         lot_number: '3ff9a45ea3b9490ebb47fb4497f2fc00',
        //         pass_token: '6fe26bcba1e08319d4b31a9d99f1704778f898f060b5daad63e473b636ca510e',
        //         gen_time: '1715853134',
        //         captcha_output:'PXwiDsFVO6xwfPeCnHDu8z_DRd1uTd9FjcHdEgU1kPuMETTZe-n7q9IIFb37jXgffFdcYHhvD98vb__BjmSxd5euqjSlhuIA7VS06Gv8raYsOg5KV2nU5hxgbc7m-b3O4kABIN_KKv32CqvxoYMbXmwlPegJlpEeLwXIy6pvqQEo68atO7R2SHh7niQCqMT5vkETcJAxxZywDCa1tArPb-5ASOG-gY4j8FvzodGA3gAjmBQ_BmVm5bWCqVna-anLEPto_Jh9ZWtu1AN8hYufppkipTSrcmWYOiYVd-gjGNLcgBRuEwmOLj_iT6XdEAoqHnFe1wwNqe6LLYCSUPuiHv3fcKc8AomQnwy2zaGSPX3zOEOizAf2i2BCpAtZ-DJ3NmxcgDs3VZQYcdjWkXXk80bai3r9EhNWJCduBro26Ci-q_keWR8WSWBx288NkZCY' 
        //     }).then(res=>{
        //         console.log(res);

        //     }    
        // },
        toggleForm() {
         
            // this.isSignUp = !this.isSignUp;
            const mainElement = document.querySelector('main');
            if (mainElement) {
                mainElement.classList.toggle('sign-up-mode');
            }
        },
        moveSlider(index) {
            let currentImage = document.querySelectorAll(`.image`);
            currentImage[index].classList.add(`img-${index}`)
            this.currentSlide = index;
            const textSlider = document.querySelector(".text-group");
            textSlider.style.transform = `translateY(${-(index) * 2.2}rem)`;
        }
    }
};
</script>

<style lang="scss" scoped>  
@import "./css/newVerify/newVerify.scss";
</style>